<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <button @click="fuMethod1">父属性方法1</button>
    <button @click="fuMethod2">父属性方法2</button>
    <button @click="fuToZiMethod1">点我调用子属性方法1</button>
    <button @click="fuToZiMethod2">点我调用子属性方法2</button>
    <hr>
    <vm-component ref="my"></vm-component>
</div>

<!--写子属性组件-->
<template id="temp">
    <div>
        <button @click="ziMethod1">子属性方法1</button>
        <button @click="ziMethod2">子属性方法2</button>
    </div>
</template>

<script>
    // 创建组件
    const ziComponent = Vue.extend({
        template:"#temp",
        data(){
            return {

            }
        },
        methods:{
            ziMethod1:function () {
                alert("子属性方法1调用");
            },
            ziMethod2:function () {
                alert("子属性方法2调用");
            }
        }
    });

    // 注册组件(***************组件名不能有大写字母**********自定义事件不能有大写字母*************)
    Vue.component("vm-component",ziComponent);

    let vm = new Vue({
        el: "#app",
        data: {

        },
        methods:{
            fuMethod1:function () {
                alert("父属性方法1");
            },
            fuMethod2:function () {
                alert("父属性方法2");
            },
            fuToZiMethod1:function (){
                let $ref = this.$refs["my"];
                $ref.ziMethod1();
            },
            fuToZiMethod2:function () {
                let $ref = this.$refs["my"];
                $ref.ziMethod2();
            }
        }
    });
</script>

</body>
</html>